<template>
	<view class="c-clockininfo">
		<view class="c-info-user">
			<view class="c-info-user-header">
				会员
			</view>
			<view class="c-info-user-name">
				<view class="c-info-user-name-username">
					{{UserName}}
				</view>
				<view class="c-info-user-name-orgin">
					{{OrgName}}
				</view>
			</view>
			<view class="c-info-user-history" @click="onNavTo('./ClockinHistory')">统计</view>
		</view>

		<block v-for="idx in maxIndex">
			<view class="c-info-clockin">
				<block v-for="(item,index) in filterData(items,idx)" :key="index">
					<view class="clockin-list">
						<view class="clockin-tip">
							<view class="circle"></view>
							<view class="tip-title">{{item.ClockSchedulingID_Name}}</view>
							<view class="tip-time">{{chkClockinTime(item.ClockTime,item.ClockClass)}}</view>
						</view>
						<view v-show='item.EnableClockin!=0&&item.ClockTime==""'>
							<view class="clockin-tap" @click="onAddClockinInfo(item)">
								<view :class="chkClockinColor(item.EnableClockin)">
									{{chkClockinStatus(item.EnableClockin)}}
									<view class="act-time">
										{{clockinTime}}
									</view>
								</view>
							</view>
							<view class="clockin-way" v-show="intStatus==0">
								<icon type="info" size="15"></icon><text>正在查询打卡范围..</text>
							</view>
							<view class="clockin-way" v-show="intStatus==1">
								<icon type="success" size="15" color="#10B37C"></icon><text>已进入打卡范围:{{wifiName}}</text>
							</view>
							<view class="clockin-way" v-show="intStatus==2">
								<icon type="cancel" size="15" color="#DC143C"></icon><text>不在打卡范围内!</text>
							</view>
						</view>
						<view class="clockin-tap h180" v-show="item.EnableClockin==0">
							<icon type="cancel" size="20" color="#DC143C"></icon><text>还未开始打卡</text>
						</view>
						<view class="clockin-tap h180" v-show="item.EnableClockin==3">
							<icon type="success" size="20" color="#10B37C"></icon><text>{{chkClockinClass(item.ClockClass)}}</text>
						</view>
					</view>
				</block>
			</view>
		</block>

		<view class="noWifiData" v-show="blnShowClockin">
			<text>还没有设置 WIFI 记录</text>
		</view>

	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				UserName: JSON.parse(uni.getStorageSync("userLoginData")).UserName,
				OrgName: JSON.parse(uni.getStorageSync("userLoginData")).OrgName,
				clockinText: "定位中...",
				clockinTime: "00:00:00",
				SystemTime: "",
				intStatus: 0,
				wifiName: "",
				wifiId: 0,
				items: [],
				maxIndex: 0,
				blnShowClockin: false
			}
		},
		onShow: function(options) {
			// 显示排班信息
			this.getClockinList();
			// 获取打卡班次
			this.getClockWifiLst();
		},
		methods: {
			onNavTo(url){
				if(url.trim().length>0){
					uni.navigateTo({
						url:url
					})
				}else{
					uni.showToast({
						title:"正在开发中..."
					})
				}
			},
			// 过滤打卡颜色
			chkClockinColor(EnableClockin) {
				// 正常打卡
				switch (EnableClockin) {
					case "1":
						// 打外勤卡
						if (this.intStatus == 2) {
							return "tap-act bgB";
						} else {
							return "tap-act bgC";
						}
						break;
					case "2":
						return "tap-act bgD";
						break;
					case "3":
						return "tap-act bgA";
						break;
				}
			},
			// 过滤打卡时间
			chkClockinTime(ClockTime, ClockClass) {
				// 如果为空
				if (ClockTime == "") {
					return "未打卡";
				} else {
					if (ClockClass == 0) {
						return "已于 " + this.retFormatTime(ClockTime) + " 完成打卡!";
					} else if (ClockClass == 1) {
						return "已于 " + this.retFormatTime(ClockTime) + " 完成外勤打卡!";
					} else if (ClockClass == 2) {
						return "已于 " + this.retFormatTime(ClockTime) + " 完成补卡!";
					} else if (ClockClass == 3) {
						return "已于 " + this.retFormatTime(ClockTime) + " 完成外勤补打卡!";
					}
				}
			},
			// 过滤显示文字
			chkClockinClass(ClockClass) {
				if (ClockClass == 0) {
					return "打卡完成";
				} else if (ClockClass == 1) {
					return "外勤打卡完成";
				} else if (ClockClass == 2) {
					return "补卡完成";
				} else if (ClockClass == 3) {
					return "外勤补卡完成";
				}
			},
			// 过滤打卡状态
			chkClockinStatus(EnableClockin) {
				// 正常打卡
				switch (EnableClockin) {
					case "0":
						return "未开始打卡";
						break;
					case "1":
						if (this.intStatus == 2) {
							return "外勤打卡";
						} else {
							return "正常打卡";
						}
						break;
					case "2":
						return "申请补卡";
						break;
					case "3":
						return "打卡完成";
						break;
				}
			},
			// 过滤打卡数据
			filterData(items, i) {
				let _items = [];
				switch (i) {
					case 1:
						_items.push(items[i - 1], items[i])
						break;
					case 2:
						_items.push(items[i], items[i + 1])
						break;
					case 3:
						_items.push(items[i + 1], items[i + 2])
						break;
				}
				return _items;
			},
			// 获取已打卡信息
			getClockinList() {
				// 准备数据
				let apiData = {
					url: pageApp.globalData.url + "/EmployeeClockinList",
					data: {},
					success: (d) => {
						// console.log("2.已打卡数据", d.data)
						if (d.data.records > 0) {
							this.items = d.data.data.items;
							this.maxIndex = this.items.length / 2;
						} else {
							this.blnShowClockin = true;
						}
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			},
			onAddClockinInfo(item) {
				if (this.intStatus > 0) {
					if (item.EnableClockin == 2) {
						// 申请补卡
						let c_cls = this.intStatus == 1 ? 2 : 3;
						uni.navigateTo({
							url: "./ClockinLater?source=ClockinInfo&c_cls=" + c_cls + "&c_id=" + item.ClockSchedulingID + "&later_time=" + this.retFormatYmdt(this.SystemTime)
						})
					} else {
						//准备数据
						let apiData = {
							url: pageApp.globalData.url + "/ClockinNew",
							data: {
								"Employee": JSON.parse(uni.getStorageSync("userLoginData")).UserID,
								"ClockType": item.ClockType,
								"ClockClass": this.intStatus == 1 ? 0 : 1,
								"ClockWifiName": this.intStatus == 1 ? this.wifiName : "无WIFI名称",
								"ClockWifiID": this.wifiId,
								"ClockSchedulingID": item.ClockSchedulingID,
								"DepartmentID": JSON.parse(uni.getStorageSync("userLoginData")).DepartmentID,
								"OrgID": JSON.parse(uni.getStorageSync("userLoginData")).OrgID
							},
							method: "POST",
							success: (d) => {
								if (d.data.code == "001") {
									uni.showToast({
										icon: "success",
										title: "打卡成功！"
									})
									setTimeout(()=>{
										// 显示排班信息
										this.getClockinList();
									},1000)
								} else {
									uni.showToast({
										icon: "fail",
										title: "打卡失败！"
									})
								}
							}
						}
						//发送数据请求
						this.vjAjaxData(apiData);
					}
				} else {
					uni.showToast({
						icon: "none",
						title: "正在查询中...，请稍候再试！"
					})
				}
			},
			getClockWifiLst() {
				// 准备数据
				let apiData = {
					url: pageApp.globalData.url + "/ClockWifiList",
					data: {
						"page": 1,
						"rows": 10
					},
					success: (d) => {
						uni.hideLoading();
						// console.log("1.WIFI", d.data.data.items);
						if (d.data.data.items.length) {
							// 获取系统时间
							this.getCurDate();
							// 动态检测当前wifi信息
							let recWIFI = d.data.data.items;
							// console.log("WIFI数据",recWIFI);
							// 匹配对数据记录
							this.chkExitWIFI(recWIFI);
						} else {
							this.blnShowClockin = true;
						}
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			},
			getCurDate() {
				// 准备数据
				let apiData = {
					url: pageApp.globalData.url + "/SystemTime",
					data: {},
					success: (d) => {
						this.SystemTime = d.data.data.SystemTime;
						this.showCurDate(d.data.data.SystemTime);
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			},
			// 动态显示服务器时间
			showCurDate(v) {
				let _sysTime = new Date(Date.parse(v.replace(/-/g, "/")));
				let _h = _sysTime.getHours();
				let _m = _sysTime.getMinutes();
				let _s = _sysTime.getSeconds();
				if (task) clearInterval(task);
				let task = setInterval(() => {
					_s += 1;
					if (_s == 60) {
						_s = 0;
						_m += 1;
					}
					if (_m == 60) {
						_m = 0;
						_h += 1;
					}
					this.clockinTime = this.strAddZero(_h) + ":" + this.strAddZero(_m) + ":" + this.strAddZero(_s)
				}, 1000)
			},
			// 获取当前wifi信息
			getCurWIFI() {
				let _data = {
					ssid: "无效wifi",
					bssid: "00:00:00:00:00:00"
				};
				// #ifdef APP-PLUS
				// 主窗体  
				let MainActivity = plus.android.runtimeMainActivity()
				// 上下文  
				let Context = plus.android.importClass('android.content.Context')
				// 导入WIFI管理 和 WIFI 信息 的class  
				plus.android.importClass("android.net.wifi.WifiManager")
				plus.android.importClass("android.net.wifi.WifiInfo")
				// 获取 WIFI 管理实例  
				let wifiManager = MainActivity.getSystemService(Context.WIFI_SERVICE)
				// 获取当前连接WIFI的信息  
				let info = wifiManager.getConnectionInfo();
				_data.ssid = info.getSSID();
				_data.bssid = info.getBSSID();
				return _data
				// #endif

				// #ifndef APP-PLUS
				return _data;
				// #endif
			},
			// 动态检测当前wifi与记录是否匹配
			chkExitWIFI(arr) {
				if (task) clearInterval(task);
				let task = setInterval(() => {
					let obj = this.getCurWIFI();
					let res = arr.find(item => '"' + item.ClockWifiName + '"' == obj.ssid);
					if (res) {
						// console.log("success");
						this.intStatus = 1;
						this.wifiName = res.ClockWifiName;
						this.wifiId = res.ID;
					} else {
						// console.log("error");
						this.intStatus = 2;
					}
				}, 5000)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}
	.c-clockininfo{
		overflow: hidden;
	}
	.c-info-user {
		display: flex;
		background-color: #ffffff;
		margin: 20rpx 26rpx;
		padding: 20rpx 16rpx;
		border-radius: 16rpx;
		position: relative;
	}
	
	.c-info-user-history{
		position: absolute;
		right: 20rpx;
		top:35rpx;
	}

	.c-info-user-header {
		width: 60rpx;
		height: 60rpx;
		padding: 4rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50%;
		background-color: #4497e1;
		margin-right: 16rpx;
		margin-top: 6rpx;
		color: #ffffff;
		font-size: 20rpx;
	}

	.c-info-user-name-username {
		font-size: 34rpx;
		color: #000000;
		font-weight: 700;
	}

	.c-info-user-name-orgin {
		font-size: 26rpx;
		line-height: 30rpx;
	}

	.c-info-clockin {
		background-color: #ffffff;
		margin: 20rpx 26rpx;
		padding: 20rpx 0 40rpx 0;
		border-radius: 16rpx;
	}

	.clockin-list {
		padding: 24rpx 50rpx;
		position: relative;
		top: 40rpx;
		margin-bottom: 30rpx;
		left: 30rpx;
		border-left: solid 6rpx #E5E5E5;
	}

	.clockin-list .circle {
		width: 26rpx;
		height: 26rpx;
		left: -16rpx;
		top: -28rpx;
		border-radius: 50%;
		background-color: #798289;
		position: absolute;
	}

	.clockin-list .clockin-tip {
		display: flex;
		padding: 0 20rpx;
		margin-top: -42rpx;
		margin-left: -40rpx;
	}

	.clockin-list .clockin-tip .tip-title {
		font-size: 34rpx;
		color: #000000;
		margin-right: 30rpx;
		margin-top: -20rpx;
	}

	.clockin-list .clockin-tip .tip-time {
		font-size: 26rpx;
		color: #707070;
		margin-top: -20rpx;
	}

	.clockin-list .clockin-tap {
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
		margin-left: -60rpx;
	}

	.clockin-list .h180 {
		padding: 180rpx 0;
	}

	.clockin-list .clockin-tap text {
		margin-left: 8rpx;
	}

	.clockin-list .clockin-tap .tap-act {
		width: 300rpx;
		height: 300rpx;
		text-align: center;
		line-height: 300rpx;
		border-radius: 50%;
		color: #ffffff;
		position: relative;
		font-size: 34rpx;
		box-shadow: 8rpx 8rpx 8rpx #969899;
	}

	.clockin-list .clockin-tap .tap-act .act-time {
		position: absolute;
		top: 40rpx;
		left: 50%;
		margin-left: -58rpx;
		font-size: 28rpx;
		color: #f1f1f1;
	}

	.clockin-list .clockin-way {
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		padding-bottom: 30rpx;
		margin-left: -40rpx;
	}

	.clockin-list .clockin-way text {
		margin-left: 8rpx;
	}

	.bgA {
		background-color: #F08846;
	}

	.bgB {
		background-color: #10B37C;
	}

	.bgC {
		background-color: #4497e1;
	}

	.bgD {
		background-color: #EA5A24;
	}

	.noWifiData {
		padding: 30rpx;
		margin: 20rpx 0;
		text-align: center;
	}
</style>
